<template>
  <div v-loading="loading" class="container">
    <el-tabs v-model="activeName" style="padding-left:30px">
      <!-- 基本信息 -->
      <el-tab-pane label="信息配置" name="first">
        <div class="section">
          <h2 class="title">基本信息</h2>
          <ul class="info">
            <li class="list-item" :hidden="cateHidden">
              <div class="tip">
                <span class="must">*</span>
                项目分类：
              </div>
              <div class="detail">
                <el-select v-model="cate_id" placeholder="请选择" filterable>
                  <el-option
                    v-for="item in class_arr"
                    :key="item.value"
                    size="medium"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 项目名称：
              </div>
              <div class="detail">
                <el-input v-model="project_name" :maxlength="42" placeholder="请输入内容" />
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 医院名称：
              </div>
              <div class="detail">
                <el-select v-model="hos_id" placeholder="请选择" @change="change_hos" filterable>
                  <el-option
                    v-for="item in hos_arr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 排序：
              </div>
              <div class="detail">
                <!-- <el-input v-model="sort"
                placeholder="请输入内容"></el-input>-->
                <el-input-number v-model="sort" :precision="0" :step="1" size="medium" :min="0" />
              </div>
            </li>
          </ul>

          <h2 class="title">价格设置</h2>
          <ul class="info">
            <li class="list-item">
              <div class="tip">
                <!-- <span class="must">*</span> 项目原价： -->
                <span class="must">*</span> 价格类型：
              </div>
              <!--              :disabled="page_status === 2"-->
              <div class="detail">
                <!-- <el-input-number
                  v-model="old_price"
                  :precision="2"
                  :step="0.01"
                  placeholder="请输入内容"
                  size="medium"
                  :min="0"
                />-->
                <el-select v-model="payType" placeholder="请选择">
                  <!-- <el-option label="全款" value="0" /> -->
                  <el-option label="定金" value="0" />
                </el-select>
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 价格名称：
              </div>
              <div class="detail">
                <el-input v-model="price_name" :maxlength="42" placeholder="请输入内容" />
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 拼团全款：
              </div>
              <div class="detail">
                <el-input v-model="group_price" :precision="2" :step="0.01" size="medium" :min="0" />
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 原价全款：
              </div>
              <div class="detail">
                <el-input v-model="old_price" :precision="2" :step="0.01" size="medium" :min="0" />
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 拼团定金：
              </div>
              <div class="detail">
                <el-input
                  v-model="groupSubscription"
                  :precision="2"
                  :step="0.01"
                  size="medium"
                  :min="0"
                />
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 原价定金：
              </div>
              <div class="detail">
                <el-input
                  v-model="subscription"
                  :precision="2"
                  :step="0.01"
                  size="medium"
                  :min="0"
                />
              </div>
            </li>
            <!--        <li class="list-item">-->
            <!--          <div class="tip">-->
            <!--            <span class="must">*</span> 设置分销金额：-->
            <!--          </div>-->
            <!--          <div class="detail">-->
            <!--            <el-radio-group-->
            <!--              v-model="disRadio"-->

            <!--              @change="this.disRadioChange"-->
            <!--            >-->
            <!--              <el-radio :label="0">默认</el-radio>-->
            <!--              <el-radio :label="1">自定义</el-radio>-->

            <!--            </el-radio-group>-->
            <!--          </div>-->
            <!--        </li>-->
            <!--        <li class="list-item" :hidden="isDisHidden">-->
            <!--          <div class="tip">-->
            <!--            <span class="must">*</span> 分销金额：-->
            <!--          </div>-->
            <!--          <div class="detail">-->
            <!--            <el-input-number-->
            <!--              v-model="subsidies"-->
            <!--              :precision="2"-->
            <!--              :step="0.01"-->
            <!--              placeholder="请输入内容"-->
            <!--              size="medium"-->
            <!--              :min="0"-->
            <!--            />-->
            <!--          </div>-->
            <!--        </li>-->
          </ul>
          <h2 class="title">医院结算设置</h2>
          <ul class="info">
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 结算类型：
              </div>
              <div class="detail">
                <!-- 比例、固定金额 -->
                <el-select v-model="hospitalPriceType" placeholder="请选择" @change="this.radioChange">
                  <el-option label="固定金额" value="0" />
                  <el-option label="比例" value="1" />
                </el-select>
              </div>
            </li>
            <li class="list-item" v-if="hospitalPriceType=='1'">
              <div class="tip">
                <span class="must">*</span> 输入比例：
              </div>
              <div class="detail">
                <el-input
                  v-model="hospitalPriceValue"
                  :precision="2"
                  :step="0.01"
                  placeholder="请输入内容"
                  size="medium"
                  :min="0"
                >
                  <template slot="append">%</template>
                </el-input>
              </div>
            </li>
            <li class="list-item" v-else>
              <div class="tip">
                <span class="must">*</span> 输入金额：
              </div>
              <div class="detail">
                <el-input
                  v-model="hospitalPriceValue"
                  :precision="2"
                  :step="0.01"
                  placeholder="请输入内容"
                  size="medium"
                  :min="0"
                ></el-input>
              </div>
            </li>
          </ul>
          <h2 class="title">运营设置</h2>
          <ul class="info">
            <li class="list-item">
              <div class="tip">项目销量：</div>
              <div class="detail">
                <!-- <el-input v-model="sales"
                placeholder="请输入内容"></el-input>-->
                <el-input-number v-model="sales" :precision="0" :step="1" size="medium" :min="0" />
              </div>
            </li>

<!--            <li class="list-item">-->
<!--              <div class="tip">-->
<!--                <span class="must">*</span> 成团人数：-->
<!--              </div>-->
<!--              <div class="detail">-->
<!--                <el-input-number-->
<!--                  v-model="group_size"-->
<!--                  :precision="0"-->
<!--                  :step="1"-->
<!--                  size="medium"-->
<!--                  :min="0"-->
<!--                />-->
<!--              </div>-->
<!--            </li>-->
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 是否参与奖励券：
              </div>
              <div class="detail">
                <!-- <el-radio-group v-model="subRadio" @change="this.radioChange">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>-->
                <el-select v-model="subRadio" placeholder="请选择" @change="this.radioChange">
                  <el-option label="否" value="0" />
                  <el-option label="是" value="1" />
                </el-select>
              </div>
            </li>
            <li class="list-item" :hidden="this.isSubHidden">
              <div class="tip">
                <span class="must">*</span> 奖励金额：
              </div>
              <div class="detail">
                <el-input-number
                  v-model="subsidies"
                  :precision="2"
                  :step="0.01"
                  placeholder="请输入内容"
                  size="medium"
                  :min="0"
                />
              </div>
            </li>

<!--            <li class="list-item">-->
<!--              <div class="tip">-->
<!--                <span class="must">*</span> 是否添加立减券：-->
<!--              </div>-->
<!--              <div class="detail">-->
<!--                &lt;!&ndash; <el-radio-group v-model="redRadio" @change="this.redRadioChange">-->
<!--                  <el-radio :label="0">否</el-radio>-->
<!--                  <el-radio :label="1">是</el-radio>-->
<!--                </el-radio-group>&ndash;&gt;-->
<!--                <el-select v-model="redRadio" placeholder="请选择" @change="this.redRadioChange">-->
<!--                  <el-option label="否" value="0" />-->
<!--                  <el-option label="是" value="1" />-->
<!--                </el-select>-->
<!--              </div>-->
<!--            </li>-->
<!--            <li class="list-item" :hidden="this.isReduceHidden">-->
<!--              <div class="tip">-->
<!--                <span class="must">*</span> 立减金额：-->
<!--              </div>-->
<!--              <div class="detail">-->
<!--                <el-input-number-->
<!--                  v-model="coupons"-->
<!--                  :precision="2"-->
<!--                  :step="0.01"-->
<!--                  placeholder="请输入内容"-->
<!--                  size="medium"-->
<!--                  :min="0"-->
<!--                />-->
<!--              </div>-->
<!--            </li>-->
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 分享结算基数：
              </div>
              <div class="detail">
                <el-input v-model="disPrice" :precision="2" :step="0.01" size="medium" :min="0" />
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 分享可赚金额：
              </div>
              <div class="detail">
                <el-input
                  v-model="minSharePrice"
                  :precision="2"
                  :step="0.01"
                  size="medium"
                  :min="0"
                />
              </div>-
              <div class="detail">
                <el-input
                  v-model="maxSharePrice"
                  :precision="2"
                  :step="0.01"
                  size="medium"
                  :min="0"
                />
              </div>
            </li>
          </ul>
        </div>
        <div class="sub-btn">
          <el-button type="primary" @click="next_project()">下一页</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目材料配置" name="second">
        <div class="section">
          <h2 class="title">分享素材</h2>
          <ul class="info">
            <div v-for="(paperwork,index) in paperworkUl" :key="index">
              <li class="list-item">
                <div class="tip">分享文案：</div>
                <div class="detail project_detail">
                  <textarea
                    id="form-control"
                    v-model="paperwork.copyWriteText"
                    type="text"
                    class="form-control comment-input"
                    placeholder="请输入文案内容，最多输入400字"
                    maxlength="400"
                    @keyup="selfAdaption($event)"
                  />
                  <span v-html="paperwork.copyWriteText.length" />/400字
                </div>
              </li>
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span>分享图片：
                </div>
                <div class="detail project_detail">
                  <ul class="img-list">
                    <li v-for="(item, index) in img_share_list" :key="index" class="img-item">
                      <img v-if="item.url" :src="item.url" alt class="img" />
                      <div class="del-btn" @click.stop="del_share(item)">
                        <i class="el-icon-delete" />
                      </div>
                    </li>
                  </ul>
                  <div class="upload-btn">
                    <el-upload
                      action="https://mpingweb.yuepinyuemei.com/api/upload"
                      :data="{
                    dirPath: 'authentication',
                    upload_status: true }"
                      :multiple="true"
                      :limit="9"
                      :file-list="img_share_list"
                      :show-file-list="false"
                      list-type="picture-card"
                      :on-success="upload_share"
                      :before-upload="before_main"
                      :on-remove="del_share"
                    >
                      <i class="el-icon-plus icon" />
                    </el-upload>
                  </div>
                </div>
              </li>
            </div>
          </ul>
        </div>

        <div class="section">
          <h2 class="title">图片和详情</h2>
          <ul class="info">
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 项目主图：
                <div class="msk">图片尺寸:1:1 推荐（355px*355px）</div>
              </div>
              <div class="detail project_detail">
                <ul class="img-list">
                  <li v-for="(item, index) in img_main_list" :key="index" class="img-item">
                    <img v-if="item.url" :src="item.url" alt class="img" />
                    <div class="del-btn" @click.stop="del_main(item)">
                      <i class="el-icon-delete" />
                    </div>
                  </li>
                </ul>
                <div class="upload-btn">
                  <el-upload
                    action="https://mpingweb.yuepinyuemei.com/api/upload"
                    :data="{
                  dirPath: 'authentication',
                  upload_status: true }"
                    :multiple="false"
                    :file-list="img_main_list"
                    :show-file-list="false"
                    list-type="picture-card"
                    :on-success="upload_main"
                    :before-upload="before_main"
                    :on-remove="del_main"
                  >
                    <i class="el-icon-plus icon" />
                  </el-upload>
                </div>
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span>项目展示图：
                <div class="msk">图片尺寸:1:1</div>
              </div>
              <div class="detail project_detail">
                <ul class="img-list">
                  <li v-for="(item, index) in img_list" :key="index" class="img-item">
                    <img v-if="item.url" :src="item.url" alt class="img" />
                    <div class="del-btn" @click.stop="del_arr(item)">
                      <i class="el-icon-delete" />
                    </div>
                  </li>
                </ul>
                <div class="upload-btn">
                  <el-upload
                    action="https://mpingweb.yuepinyuemei.com/api/upload"
                    :data="{
                  dirPath: 'authentication',
                  upload_status: true }"
                    :multiple="true"
                    :limit="5"
                    :file-list="img_list"
                    :show-file-list="false"
                    list-type="picture-card"
                    :on-success="upload_arr"
                    :before-upload="before_main"
                    :on-remove="del_arr"
                  >
                    <i class="el-icon-plus icon" />
                  </el-upload>
                </div>

                <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%"
                   :src="common.img_url+img_main"
                   alt="">
                </el-dialog>-->
              </div>
            </li>
            <li class="list-item">
              <div class="tip">
                <span class="must">*</span> 项目详情：
              </div>
              <div class="detail project_detail">
                <tinymce :id="tinymceId" v-model="projects_detail" :min-height="750" :width="760" />
              </div>
            </li>
          </ul>
        </div>
        <div class="sub-btn">
          <el-button
            type="primary"
            @click="save_project()"
            v-if="this.$route.query.page_status != 3"
          >保存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import tinymce from "@/components/Tinymce";
import { getCateDownList } from "../../api/category";
import { getHospitalList } from "../../api/hospitalManage";
import { addProject, projectDetail, updateProject } from "../../api/project";
import { appType } from "../../utils/constanst";
export default {
  components: {
    tinymce,
  },
  data() {
    return {
      activeName: "first",
      money_id: null,
      payType: "0",
      tinymceId: this.id || "vue-tinymce" + Date.parse(new Date()),
      cateHidden: true,
      copyWriteTextLength: 400,
      input: "",
      project_id: null,
      class_arr: [],
      hos_arr: [],
      cate_id: "", //   分类id
      hos_id: "", //   医院id
      hos_name: "", //   医院名称
      dialogImageUrl: "", //   图片上传控件
      dialogVisible: false,
      project_name: "", //   项目名称
      old_price: "", //   原价
      old_price1: "", //   原价定金
      subscription: "", //   原价定金
      subsidies: "", // 奖励价格
      coupons: null, // 立减价格
      price_name: "", //   价格名称
      group_price: "", //   项目价格
      group_price1: "", //   项目价格定金
      groupSubscription: "", //   项目价格定金
      disPrice: "", //分成基数
      minSharePrice: "", //分享可赚最小金额
      maxSharePrice: "", //分享可赚最大金额
      hospitalPriceType: null,
      hospitalPriceValue: null,
      status: true, //   是否上架
      sales: "", //   销量
      sort: "", //   排序
      group_size: 0, //   成团人数
      subRadio: "0", // 是否参与奖励 默认-否
      redRadio: "0", // 是否参与立减 默认-否
      isSubHidden: true, // 奖励金额输入框是否隐藏 默认隐藏
      isReduceHidden: true, // 立减券输入框是否隐藏 默认隐藏
      paperwork_size: 0, //   分享文案数
      img_main: "", //   项目主图
      img_main_list: [],
      img_arr: [], //   项目展示图
      img_list: [],
      img_s: [], //   分享
      img_share_list: [], // 分享图片
      projects_detail: "", //   项目详情
      page_status: 1, //   页面状态  1 添加  2 编辑
      loading: false,
      paperworkUl: [
        {
          copyWriteText: "",
          copyWriteStatus: 1,
        },
      ],
    };
  },
  watch: {
    title() {
      if (this.title.length > this.copyWriteTextLength) {
        this.title = String(this.title).slice(0, this.copyWriteTextLength);
      }
    },
    img_arr(val) {
      const arr = [];
      if (Array.isArray(val)) {
        val.forEach((item, index) => {
          arr.push({
            name: index,
            url: this.common.img_url + item,
          });
        });
        this.img_list = arr;
        this.$forceUpdate();
      }
    },
    img_s(val) {
      const arr = [];
      if (Array.isArray(val)) {
        val.forEach((item, index) => {
          arr.push({
            name: index,
            url: this.common.img_url + item,
          });
        });
        this.img_share_list = arr;
        this.$forceUpdate();
      }
    },
    img_main(val) {
      const arr = [
        {
          name: "main",
          url: this.common.img_url + val,
        },
      ];
      this.img_main_list = arr;
      this.$forceUpdate();
    },
    // group_price(val){
    //   this.group_price1=(val-0)*0.3
    // },
    // old_price(val){
    //   this.old_price1=(val-0)*0.3
    // }
  },
  mounted() {
    if (appType === 4) {
      this.cateHidden = false;
    }

    // if (this.$route.query.page_status) {
    //   if (this.$route.query.page_status == 2) {
    //     this.$route.meta.title = "编辑项目";
    //   } else if (this.$route.query.page_status == 3) {
    //     this.$route.meta.title = "查看详情";
    //   }
    // } else {
    //   this.$route.meta.title = "添加项目";
    // }
    // 页面状态  1 添加  2 编辑
    switch (this.$route.query.page_status) {
      case 1:
        this.$route.meta.title = "添加项目";
        break;
      case 2:
        this.$route.meta.title = "编辑项目";
        break;
      case 3:
        this.$route.meta.title = "查看详情";
        break;

      default:
        break;
    }

    if (this.$route.query.id) {
      this.project_id = this.$route.query.id;
      this.get_detail();
    }

    this.get_catelist();
    this.get_hoslist();
  },
  methods: {
    //
    selfAdaption(e) {
      if (e.target.scrollHeight > 114) {
        return false; // 114是输入框6行的高度，超过6行就使用滚动条
      }
      e.target.style.height = "auto";
      e.target.scrollTop = 0; // 防抖动
      e.target.style.height = e.target.scrollHeight + "px"; // 将输入框高度置为其可滚动高度
    },

    // 选择是否参与奖励onchange
    radioChange(e) {
      this.isSubHidden = e === 0;
    },
    // 选择是否设置立减券onchange
    redRadioChange(e) {
      this.isReduceHidden = e === 0;
    },
    // 获取分类列表
    get_catelist() {
      getCateDownList({
        pageNum: 1,
        pageSize: 1000,
      })
        .then((result) => {
          const res = result.data;
          if (res.code === 0) {
            const arr = [];
            if (res.data.list) {
              res.data.list.forEach((item) => {
                arr.push({
                  value: item.id,
                  label: item.categoryName,
                });
              });
              this.class_arr = arr;
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 获取医院列表
    get_hoslist() {
      getHospitalList({
        pageNum: 1,
        pageSize: 1000,
      })
        .then((result) => {
          const res = result.data;
          if (res.code === 0) {
            const arr = [];
            if (res.data.list) {
              res.data.list.forEach((item) => {
                arr.push({
                  value: item.id,
                  label: item.hospitalName,
                });
              });
              this.hos_arr = arr;
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 选择医院
    change_hos(res) {
      this.hos_arr.forEach((val) => {
        if (val.value === res) {
          this.hos_name = val.label;
        }
      });
    },
    // 上传主图
    upload_main(res) {
      this.loading = false;
      this.img_main = res.data;
      this.$forceUpdate();
    },
    // 上传主图之前钩子
    before_main() {
      this.loading = true;
    },
    // 删除主图
    del_main(val) {
      this.img_main = "";
      this.img_main_list = [];
    },
    // 上传展示图
    upload_arr(res) {
      this.loading = false;
      const arr = [...this.img_arr];
      arr.push(res.data);
      this.img_arr = arr;
    },
    // 删除展示图
    del_arr(val) {
      const del_url = val.url.split(this.common.img_url)[1];
      this.img_arr.forEach((item, index) => {
        if (del_url === item) {
          this.img_arr.splice(index, 1);
        }
      });
    },
    // 上传分享图片
    upload_share(res) {
      this.loading = false;
      const share = [...this.img_s];
      share.push(res.data);
      this.img_s = share;
      console.log('share',share);
    },
    // 删除分享图片
    del_share(val) {
      const del_url = val.url.split(this.common.img_url)[1];
      this.img_s.forEach((item, index) => {
        if (del_url === item) {
          this.img_s.splice(index, 1);
        }
      });
    },
    // 项目详情
    get_detail() {
      projectDetail({
        id: this.project_id - 0,
      })
        .then((result) => {
          // console.log("result", result);
          const res = result.data;
          if (res.code === 0) {
            const project_data = res.data;
            this.project_name = project_data.groupProjectName;
            this.cate_id = project_data.projectCategoryId;
            this.hos_id = project_data.hospitalId;
            this.hos_name = project_data.hospitalName;
            this.price_name = project_data.priceName;
            this.old_price = project_data.price;
            // this.old_price1 = (project_data.price - 0) * 0.3;
            this.subscription = project_data.subscription;
            this.group_price = project_data.groupPrice;
            this.group_price1 = (project_data.groupPrice - 0) * 0.3;
            this.groupSubscription = project_data.groupSubscription;

            this.disPrice = project_data.disPrice;
            this.minSharePrice = project_data.minSharePrice;
            this.maxSharePrice = project_data.maxSharePrice;
            this.hospitalPriceType = project_data.hospitalPriceType + "";
            this.hospitalPriceValue = project_data.hospitalPriceValue;
            this.sales = project_data.projectSales;
            this.sort = project_data.sort;
            this.status = project_data.status === 1;
            this.group_size = project_data.groupSize;
            this.img_main = project_data.groupMasterPicture;
            this.img_arr = project_data.groupSlavePictureList || [];
            console.log(project_data.copyWriteList);
            console.log(project_data.shareImageList);
            this.paperworkUl =
              project_data.copyWriteList.length === 0
                ? this.paperworkUl
                : project_data.copyWriteList.slice(0, 1);
            this.img_s = project_data.shareImageList ? project_data.shareImageList.slice(0, 1) : [];
            this.projects_detail = project_data.groupDetail;
            this.isSubHidden =
              project_data.subsidies === "0" ||
              project_data.subsidies === "0.00";
            this.isReduceHidden =
              project_data.coupons === "0" || project_data.coupons === null;
            this.subsidies = project_data.subsidies;
            this.subRadio =
              project_data.subsidies === "0" ||
              project_data.subsidies === "0.00"
                ? "0"
                : "1";
            this.coupons = project_data.coupons;
            this.redRadio =
              project_data.coupons === null || project_data.coupons === "0.00"
                ? "0"
                : "1";
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {
          this.$message.error("服务器网络错误，请稍后重试");
        });
    },
    next_project() {
      this.activeName = "second";
    },
    // 保存
    save_project() {
      console.log("this.img_arr", this.img_arr);
      console.log("this.img_s", this.img_s);
      // if (this.cate_id === '') {
      //   this.$message.error('请选择分类')
      // } else
      if (this.project_name === "") {
        this.$message.error("请输入项目名称");
      } else if (this.hos_id === "") {
        this.$message.error("请选择医院");
      } else if (this.old_price === "") {
        this.$message.error("请输入原价");
      } else if (this.group_price === "") {
        this.$message.error("请输入拼团价");
      } else if (this.sort === "") {
        this.$message.error("请输入排序");
      } else if (this.group_size === "") {
        this.$message.error("请输入成团人数");
      } else if (
        this.redRadio === "1" &&
        this.group_price - 0 <= this.coupons - 0
      ) {
        this.$message.error("请输入正确价格，项目价格必须大于立减券金额");
      } else if (
        this.subRadio === "1" &&
        this.group_price - 0 <= this.subsidies - 0
      ) {
        this.$message.error("请输入正确价格，项目价格必须大于奖励金额");
      } else if (
        this.redRadio === "1" &&
        this.subRadio === "1" &&
        this.group_price - 0 <= this.coupons - 0 + (this.subsidies - 0)
      ) {
        this.$message.error(
          "请输入正确价格，项目价格必须大于奖励金额与立减券金额之和"
        );
      } else if (this.img_s.length === 0) {
        this.$message.error("请上传分享图片");
      } else if (this.img_main === "") {
        this.$message.error("请上传主图");
      } else if (this.img_arr.length === 0) {
        this.$message.error("请上传展示图");
      } else if (this.projects_detail === "") {
        this.$message.error("请上传项目详情");
      } else {
        switch (this.$route.query.page_status) {
          case 1:
            this.add_project();
            break;
          case 2:
            this.rewrite_project();
            break;

          default:
            break;
        }
      }
    },
    // 添加项目
    add_project() {
      addProject({
        groupProjectName: this.project_name,
        projectCategoryId: this.cate_id === "" ? "47" : this.cate_id - 0,
        // projectCategoryName:
        hospitalId: this.hos_id - 0,
        hospitalName: this.hos_name,
        priceName: this.price_name + "", // 新增-价格名称
        price: this.old_price + "",
        groupPrice: this.group_price + "",
        projectSales: this.sales - 0,
        sort: this.sort - 0,
        groupSubscription: this.groupSubscription,
        subscription: this.subscription,
        maxSharePrice: this.maxSharePrice,
        minSharePrice: this.minSharePrice,
        hospitalPriceType: this.hospitalPriceType,
        hospitalPriceValue: this.hospitalPriceValue,
        disPrice: this.disPrice,

        // status: this.status ? '1' : '0',
        groupSize: this.group_size,
        groupMasterPicture: this.img_main,
        groupSlavePictureList: this.img_arr,
        groupDetail: this.projects_detail,
        copyWriteList:
          this.paperworkUl.length === 1 &&
          this.paperworkUl[0].copyWriteText === ""
            ? null
            : this.paperworkUl,
        subsidies: this.subsidies === "" ? 0 + "" : this.subsidies + "",
        coupons: this.coupons + "",
        shareImageList: this.img_s,

        couponsValidityHour: "88",
        couponsNum: "22",
        serverShow: "0",
      })
        .then((result) => {
          const res = result.data;
          if (res.code === 0) {
            this.$message({
              message: "添加项目成功",
              type: "success",
            });
            this.$router.go(-1);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log("err", err);
          this.$message.error(err);
        });
    },
    // 编辑项目
    rewrite_project() {
      if (this.isSubHidden) {
        this.subsidies = 0;
      }
      updateProject({
        id: this.project_id,
        groupProjectName: this.project_name,
        projectCategoryId: this.cate_id === "" ? "47" : this.cate_id - 0,
        hospitalId: this.hos_id - 0,
        hospitalName: this.hos_name,
        priceName: this.price_name + "", // 新增-价格名称
        price: this.old_price + "",
        groupPrice: this.group_price + "",
        projectSales: this.sales - 0,
        sort: this.sort - 0,
        groupSubscription: this.groupSubscription,
        subscription: this.subscription,
        maxSharePrice: this.maxSharePrice,
        minSharePrice: this.minSharePrice,
        hospitalPriceType: this.hospitalPriceType,
        hospitalPriceValue: this.hospitalPriceValue,
        disPrice: this.disPrice,
        // status: this.status ? '1' : '0',
        groupSize: this.group_size - 0,
        groupMasterPicture: this.img_main,
        groupSlavePictureList: this.img_arr,
        groupDetail: this.projects_detail,
        subsidies: this.subsidies === "" ? 0 + "" : this.subsidies + "",
        copyWriteList:
          this.paperworkUl.length === 1 &&
          this.paperworkUl[0].copyWriteText === ""
            ? null
            : this.paperworkUl,
        coupons: this.coupons + "",
        shareImageList: this.img_s,
        couponsValidityHour: "88",
        couponsNum: "22",
        serverShow: "0",
      })
        .then((result) => {
          const res = result.data;
          if (res.code === 0) {
            this.$message({
              message: "编辑项目成功",
              type: "success",
            });
            this.$router.go(-1);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 20px;
  .section {
    .title {
      width: 130px;
      height: 30px;
      background-color: #409eff;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;
      .list-item {
        margin-bottom: 20px;
        display: inline-block;
        .tip {
          color: #409eff;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          width: 150px;
          text-align: right;
          .msk {
            font-size: 10px;
            color: #666;
            margin-right: 20px;
            margin-top: 10px;
          }
          .must {
            display: inline-block;
            vertical-align: middle;
            color: #ff3040;
          }
        }
        .detail {
          color: #666;
          min-width: 350px;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          .el-select {
            display: block !important;
          }
          .img-list {
            display: inline-block;
            vertical-align: middle;
            .img-item {
              width: 150px;
              height: 150px;
              border: 1px solid #ccc;
              display: inline-block;
              vertical-align: middle;
              overflow: hidden;
              margin-right: 10px;
              position: relative;
              .img {
                width: 100%;
              }
              .del-btn {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.3);
                color: #fff;
                line-height: 150px;
                text-align: center;
                font-size: 40px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                cursor: pointer;
                display: none;
              }
              &:hover {
                .del-btn {
                  display: block;
                }
              }
            }
          }
          .upload-btn {
            width: 150px;
            height: 150px;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            .el-icon-plus {
              width: 150px;
              height: 150px;
              display: block;
              position: relative;
              &::before {
                font-size: 30px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
          &.project_detail {
            vertical-align: top;
          }
        }
      }
    }
  }
  .sub-btn {
    .el-button {
      margin: 20px auto;
      display: block;
    }
  }

  .form-control {
    width: 100%;
    padding-right: 6px;
    min-height: 300px;
    -webkit-overflow-scrolling: touch;
    resize: none;
    outline: 0 none;
    margin-top: 12px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(13, 20, 30, 1);
    line-height: 19px;
    opacity: 0.6;
  }
}
#container {
  width: 350px;
  height: 350px;
  margin: 0 0 30px 150px;
  touch-action: none;
}
</style>

